<template>
  <div class="purchase_view">
    <!-- 添加或修改申请采购明细对话框 -->
    <el-button class="active" type="text" @click="handleAdd">老师实名认证</el-button>
    <el-dialog :visible.sync="open" title="实名认证" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="190px" :rules="rules" style="margin-top: -20px">
        <el-form-item label="教授(师)工号" prop="employeeNo" label-width="120px">
            <span>{{form.employeeNo}}</span>
        </el-form-item>
        <el-form-item label="教授(师)姓名" prop="nickName" label-width="120px">
            <span>{{form.nickName}}</span>
        </el-form-item>
        <el-form-item label="教授(师)手机" prop="phonenumber" label-width="120px">
            <span>{{form.phonenumber}}</span>
        </el-form-item>
        <el-form-item label="短信验证码" prop="code" label-width="120px">
            <el-input v-model="form.code" placeholder="请输入短信验证码" size='small' style="width:200px"/>
            <el-button v-if="isSend" size='small' type="primary" @click="sendCheckCode">发送</el-button>
            <el-button size='small' v-if="!isSend">{{sendmsg}}</el-button>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchEmployee,sendVerifyCode,verifyCode } from "@/api/labdata/employee";
import authorizeItemVue from './authorizeItem.vue';
export default {
  name: "AuthTeacher",
  data() {
    return {
      username:'',
      open: false,
      sendmsg: '发送验证码',
      isSend: true,
      // 表单参数
      form: {},
      rules: {
        code: {required: true, message: '请输入验证码', trigger: 'blur'}
      }
    };
  },
  props:{
    employeeNo:String,
  },
  watch:{
    employeeNo:function(val){
      this.username = val;
    }
  },
  created() {
    this.username = this.employeeNo;
  },
  updated() {
  },
  methods: {
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      searchEmployee(this.username).then(response => {
        let searchResult = response.data;
        if (searchResult) {
          this.form.employeeNo = searchResult.employeeNo;
          this.form.nickName = searchResult.nickName;
          this.form.phonenumber = searchResult.phonenumber
        } else {
          this.form.employeeNo = null
          this.form.applyTeacherName = null;
          this.form.phonenumber = null;
        }
        //强制刷新
        this.$forceUpdate();
      });
      this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        employeeNo: null,
        nickName: null,
        phonenumber: null,
        code: null
      };
      this.resetForm("form");
      this.open = false
    },
    sendCheckCode() {
      sendVerifyCode(this.form.employeeNo)
      .then((res) => {
            this.msgSuccess("发送成功");
            this.isSend = false;
            let timer = 60;
            this.sendmsg = timer + "s";
            this.timeFun = setInterval(() => {
                --timer;
                this.sendmsg = timer + "s";
                if (timer == 0) {
                    this.isSend = true;
                    this.sendmsg = "重新发送";
                    clearInterval(this.timeFun);
                }
            }, 1000);
      });
    },
    submitForm(e) {
        this.$refs['form'].validate((valid)=> {
          if (valid) {
            verifyCode(this.form.employeeNo, this.form.code).then(response => {
              if(response.msg=='1'){
                this.open = false;
                this.$emit('auth-teacher', this.form)
              }else{
                this.msgError("校验码不正确");
              }
            });
          }
        })
    }
  }
};
</script>

<style scoped>
    .el-button.active{
    text-decoration: underline;
    color: #0000ee;
    margin-left: 15px;
  }
  .dialog-footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
</style>
